<!-- 作者:高翔宇 时间:2024/4/30 周二 下午11:24 -->
<script setup lang="ts">
import {ArrowDown, Document} from '@element-plus/icons-vue'
import {useArticleStore} from "@/store/modules/article";
import {ArticleStatusEnum} from "@/api/article/type.ts";
import {onMounted, ref} from 'vue';
import {router} from "@/router";

const getArticleList = async () => {
  await useArticleStore().getArticleList();
  console.log('articleList', useArticleStore().articleList);
};
onMounted(() => {
  getArticleList().then(() => {
    articleLoad.value = false;
  });
});
const deleteArticle = async (id: any) => {
  await useArticleStore().deleteArticle(id);
  console.log('deleteArticle', id);
};

const handleDropdownCommand = (command: string, id: number | null | undefined) => {
  console.log('Dropdown command:', command);
  switch (command) {
    case 'edit':
      console.log('Edit article');
      useArticleStore().getArticleById(id)
      router.push('/creation/article');
      break;
    case 'delete':
      console.log('Delete article');
      ElMessageBox.confirm('你确定要删除这篇文章吗？？？', {
        confirmButtonText: '嗯',
        cancelButtonText: '不',
        type: 'warning'
      }).then(() => {
        deleteArticle(id);
      }).catch(() => {
        // catch error
      })
      break;
    default:
      console.log('Unknown dropdown command');
  }
};

const articleLoad = ref(true);

const getColorByStatus = (status: any) => {
  switch (status) {
    case '审核通过':
      return '#67C23A'; // 绿色
    case '待审核':
      return '#E6A23C';
    case '审核失败':
      return '#c23f3a'; // 橙色
    case '草稿':
      return '#babcc0'; // 灰色
    default:
      return '#babcc0'; // 默认灰色
  }
};
</script>

<template>
  <el-main>
    <div class="in-main">
      <el-tabs type="border-card" class="demo-tabs">
        <el-tab-pane>
          <template #label>
            <el-icon>
              <Document/>
            </el-icon>
            &nbsp;
            文章管理
          </template>
          <el-scrollbar height="65vh">
            <el-skeleton v-if="articleLoad" animated>
              <template #template>
                <el-skeleton-item v-for="() in 5" variant="text"
                                  style="width: 100%; height: 100px; margin: 16px 0; border-radius: 8px"/>
              </template>
            </el-skeleton>
            <div class="article-list" v-else v-for="(item, index) in useArticleStore().articleList" :key="index">
              <div class="article-item"
                   style="height: 100px; margin: 16px 0; display: flex; border-radius: 8px;">
                <div class="left" style=" height: 100%;">
                  <el-image
                      :src="item.cover"
                      fit="cover"
                      style="width: 100px; height: 100px; margin-right: 10px; border-radius: 8px"/>
                </div>
                <div class="middle"
                     style=" height: 100%; width: calc(100% - 120px); display: flex; flex-direction: column; justify-content: space-between;  padding: 0;">
                  <div class="title" style="font-size: 20px; font-weight: bold; margin-bottom: 10px">
                    {{ item.title }}
                  </div>
                  <div
                      style="width:50px; text-align: center; font-size: 16px; padding: 2px; font-family: '微軟正黑體 Light','爱奇艺黑体 Medium', serif; border-radius: 4px; background-color: #f5f5f5; margin-bottom: 10px;"
                      :style="{backgroundColor: getColorByStatus(item.status)}">
                    {{ item.status }}
                  </div>
                  <div class="info" style="font-size: 14px; color: #999; margin-bottom: 10px"> <!-- 可保留底部边距 -->
                    <span v-if="item.updateTime">更新时间：{{ item.updateTime }}</span>
                    <span v-if="item.status!=ArticleStatusEnum.DRAFT">💗：{{ item.likes }}</span>
                  </div>
                </div>
                <div class="right" style="">
                  <el-dropdown @command="(command:string) => handleDropdownCommand(command, item.id)">
                    <el-button
                        type="primary"
                        class="dropdown-button"
                    >
                      管理
                      <!-- 箭头图标（固定类名，通过 CSS 控制旋转） -->
                      <el-icon class="el-icon-arrow">
                        <arrow-down></arrow-down> <!-- 初始显示向下箭头 -->
                      </el-icon>
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item command="edit">编辑文章</el-dropdown-item>
                        <el-dropdown-item command="delete">删除文章</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-main>
</template>

<style scoped lang="scss">
.article-list .article-item .middle .info span {
  margin-right: 8px;
}

.dropdown-button {
  display: flex;
  align-items: center;
  padding-right: 20px; /* 为图标留出空间 */
}

/* 图标基础样式（向下箭头） */
.el-icon-arrow {
  font-size: 14px; /* 图标大小 */
  transition: transform 0.3s ease; /* 添加过渡动画 */
  margin-left: 5px; /* 图标与文字间距 */
}

/* 鼠标悬停时箭头向上旋转 */
.dropdown-button:hover .el-icon-arrow {
  transform: rotate(180deg); /* 旋转 180 度（向上） */
}
</style>
